<template>
  <!-- 悬浮球 -->
  <ball :isDock="true" :existTabBar="true" @newAdd="newAdd"></ball>
  <img src="../../static/bg.png" alt="" class="bg" />
  <div class="topSitting">头部占位</div>
  <div class="userArea">
    <div class="advantar">
      <img src="../../static/head_icon.png" alt="" class="advantarIcon" />
    </div>
    <div class="userName">{{ userInfo.name || "" }}</div>
    <div class="userWorkNo">
      工号：<span>{{ userInfo.number || "" }}</span>
    </div>
  </div>
  <div class="banner">
    <img src="../../static/banner_bg_01.png" alt="" class="bannerBg" />
    <div class="userState">
      <div class="stateItem">
        <div class="num">100</div>
        <div class="title">订单总数</div>
      </div>
      <div class="stateItem">
        <div class="num">100</div>
        <div class="title">执行中</div>
      </div>
      <div class="stateItem">
        <div class="num">100</div>
        <div class="title">已办结</div>
      </div>
    </div>
    <div class="myPoint">
      <div class="pointItem">
        <img src="../../static/wodeyeji_icon.png" alt="" class="leftIcon" />
        <div class="leftText">我的业绩</div>
      </div>
      <div class="pointItem">
        <div class="rightText">点击展开</div>
        <img src="../../static/xiala_icon.png" alt="" class="rightIcon" />
      </div>
      <div class="myPointBg"></div>
    </div>
  </div>
  <div class="littleBanner">
    <div class="littleBannerBg"></div>
    <div class="littleItem">
      <div class="leftItem">
        <img src="../../static/kehangedai.png" alt="" class="lefticon" />
        <div class="littleTips">随用随换，灵活高效</div>
      </div>
      <img src="../../static/kehangedai_icon.png" alt="" class="bigleftIcon" />
    </div>
    <div class="colLine"></div>
    <div class="littleItem">
      <div class="leftItem">
        <img src="../../static/qita.png" alt="" class="righticon" />
        <div class="littleTips">银行产品，安全可靠</div>
      </div>
      <img
        src="../../static/qitilingshouyewu_icon.png"
        alt=""
        class="bigrightIcon"
      />
    </div>
  </div>
  <div class="todoArea">
    <div class="titleArea">
      <div class="titleText">待办</div>
      <img src="../../static/daban_bg.png" alt="" class="titleBg" />
    </div>
    <div class="more">
      <div class="moreText">更多</div>
      <div class="moreIcon"></div>
    </div>
    <div
      class="todoItem"
      v-for="item in todoList"
      :key="item.orderNo"
      @click="goDetail(item.orderNo, item.orderId)"
    >
      <div class="itemTitle">
        <div class="titleIcon">
          <img src="../../static/icon_recomment.png" alt="" class="leftIcon" />
          <img src="../../static/kehangedai.png" alt="" class="rightIcon" />
        </div>
        <div class="orderNo">
          订单号：<span>{{ item.orderNo }}</span>
        </div>
      </div>
      <div class="itemState">
        <div class="method">面签</div>
        <div class="loanNum">{{ item.limit }}</div>
        <div class="loanRate">{{ item.rate }}</div>
      </div>
      <div class="userInfo">
        <div class="leftInfo">
          <div class="userName">
            <div class="icon"></div>
            <div class="text">
              姓名：<span>{{ item.ctName }}</span>
            </div>
          </div>
          <div class="userPhone">
            <div class="icon"></div>
            <div class="text">
              手机号：<span>{{ item.ctPhone }}</span>
            </div>
            <img src="../../static/phone.png" alt="" class="phoneIcon" />
          </div>
        </div>
        <img
          src="../../static/btn3.png"
          alt=""
          class="rightInfo"
          v-if="item.source == 0"
        />
        <img
          src="../../static/btn1.png"
          alt=""
          class="rightInfo"
          v-if="item.source == 1"
        />
        <img
          src="../../static/btn2.png"
          alt=""
          class="rightInfo"
          v-if="item.source == 2"
        />
      </div>
      <div class="line"></div>
      <div class="applyTime">
        申请时间：<span>{{ item.applyTime }}</span>
      </div>
      <img src="../../static/biaoqian_bg.png" alt="" class="tag" />
    </div>
  </div>
</template>

<script setup>
// 引入悬浮球组件
import ball from "../../components/drag/drag.vue";
import { ref, reactive, onMounted } from "vue";
import { onShow } from "@dcloudio/uni-app";
import * as http from "../../utils/http";
import config from "../..//utils/config";
import { useAppStore } from "../../store/index";
const store = useAppStore();
// 首页个人信息
const userInfo = reactive({
  name: "",
  number: "",
});
// 首页待办列表
const todoList = reactive([]);
onMounted(() => {
  wx.getStorage({
    key: "token",
    success: () => {
      console.log("本地有token，无需再次登录");
      // 首页个人信息
      http
        .personage({
          id: store.userId,
        })
        .then((res) => {
          userInfo.name = res.data.name;
          userInfo.number = res.data.number;
        });
    },
    fail: () => {
      wx.reLaunch({
        url: "../../packageLogin/login/login",
      });
    },
  });
});
onShow(() => {
  wx.getStorage({
    key: "token",
    success: () => {
      http
        .myOrder({
          input: "",
          orderStatusList: ["4", "6"],
        })
        .then((res) => {
          if (res.data !== null) {
            todoList.length = 0;
            todoList.push(...res.data);
          }
        });
    },
  });
});
// 跳转详情
const goDetail = (orderNo, orderId) => {
  store.setOrderId(orderId);
  wx.setStorageSync("orderId", orderId);
  let param = {
    orderNo,
    id: orderId,
  };
  wx.navigateTo({
    url:
      "../../packageOrder/orderDetails/orderDetails?value=" +
      JSON.stringify(param),
  });
};
</script>

<style scoped lang="scss">
.todoArea {
  margin: 0 29rpx;
  margin-top: 42rpx;
  padding: 50rpx 31rpx;
  background-color: #fff;
  border-radius: 16rpx;
  position: relative;
  .titleArea {
    width: 319rpx;
    height: 50rpx;
    position: absolute;
    left: 50%;
    top: -12rpx;
    transform: translate(-50%);
    .titleText {
      padding-top: 4rpx;
      height: 40rpx;
      line-height: 40rpx;
      font-size: 28rpx;
      text-align: center;
      color: #fff;
    }
    .titleBg {
      width: 319rpx;
      height: 50rpx;
      position: absolute;
      left: 0;
      top: 0;
      z-index: -99;
    }
  }
  .more {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    left: 598rpx;
    top: 22rpx;
    .moreText {
      height: 33rpx;
      line-height: 33rpx;
      color: #a5abb7;
      font-size: 24rpx;
      margin-right: 9rpx;
    }
    .moreIcon {
      width: 10rpx;
      height: 10rpx;
      border-top: 2rpx solid #a5abb7;
      border-right: 2rpx solid #a5abb7;
      transform: rotate(45deg);
    }
  }
  .todoItem {
    margin: 30rpx 0;
    height: 284rpx;
    padding: 20rpx 0;
    border-radius: 16rpx;
    background-color: #f1f2ff;
    position: relative;
    .itemTitle {
      padding: 0 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .titleIcon {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .leftIcon {
          width: 52rpx;
          height: 52rpx;
          margin-right: 15rpx;
        }
        .rightIcon {
          width: 148rpx;
          height: 32rpx;
        }
      }
      .orderNo {
        font-size: 20rpx;
        color: #666666;
      }
    }
    .itemState {
      padding-top: 15rpx;
      padding-left: 42rpx;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-size: 16rpx;
      line-height: 26rpx;
      text-align: center;
      .method {
        width: 56rpx;
        height: 26rpx;
        background: #fff6e1;
        color: #ffb10d;
        border-radius: 4rpx;
      }
      .loanNum {
        width: 96rpx;
        height: 26rpx;
        background: #dff4ff;
        color: #0dabff;
        border-radius: 4rpx;
        margin: 0 15rpx;
      }
      .loanRate {
        width: 67rpx;
        height: 26rpx;
        background: #ffe7d6;
        color: #ff7513;
        border-radius: 4rpx;
      }
    }
    .userInfo {
      margin-top: 20rpx;
      padding-left: 39rpx;
      padding-right: 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .leftInfo {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        .userName,
        .userPhone {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin: 10rpx;
          .icon {
            width: 24rpx;
            height: 25.78rpx;
            margin-right: 22rpx;
            background: pink;
          }
          .text {
            color: #000;
            opacity: 0.65;
            font-size: 24rpx;
          }
          .phoneIcon {
            width: 24rpx;
            height: 24rpx;
            margin-left: 10rpx;
          }
        }
      }
      .rightInfo {
        width: 139rpx;
        height: 48rpx;
      }
    }
    .line {
      margin-top: 20rpx;
      width: 100%;
      height: 0;
      border-bottom: 2rpx dashed #dfdfdf;
    }
    .applyTime {
      margin-top: 20rpx;
      font-size: 20rpx;
      color: #999;
      text-align: center;
    }
    .tag {
      width: 94rpx;
      height: 38rpx;
      position: absolute;
      right: 0;
      bottom: 0;
    }
  }
}
.bg {
  width: 750rpx;
  height: 863rpx;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -9999;
}
.topSitting {
  height: 160rpx;
  opacity: 0;
}
.userArea {
  margin: 0 30rpx;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  .advantar {
    width: 128rpx;
    height: 128rpx;
    .advantarIcon {
      width: 100%;
      height: 100%;
    }
  }
  .userName {
    height: 50rpx;
    line-height: 50rpx;
    font-size: 36rpx;
    color: #000;
    margin-bottom: 20rpx;
    margin-right: 26rpx;
    margin-left: 37rpx;
  }
  .userWorkNo {
    margin-bottom: 25rpx;
    font-size: 22rpx;
  }
}
.banner {
  width: 690rpx;
  height: 290rpx;
  margin: 0 30rpx;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  .userState {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    .stateItem {
      display: flex;
      flex-direction: column;
      justify-items: center;
      align-items: center;
      color: #fff;
      .num {
        font-size: 50rpx;
        height: 58rpx;
        line-height: 58rpx;
        margin-bottom: 5rpx;
      }
      .title {
        font-size: 28rpx;
        height: 40rpx;
        line-height: 40rpx;
      }
    }
  }
  .myPoint {
    width: calc(100% - 160rpx);
    margin: 0 50rpx;
    height: 68rpx;
    padding: 0 30rpx;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .pointItem {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .leftIcon {
        width: 26rpx;
        height: 26rpx;
        margin-right: 10rpx;
      }
      .leftText {
        font-size: 24rpx;
        color: #163d85;
      }
      .rightIcon {
        width: 18rpx;
        height: 19rpx;
        margin-left: 10rpx;
      }
      .rightText {
        font-size: 24rpx;
        color: #437de9;
      }
    }
    .myPointBg {
      width: 100%;
      height: 100%;
      background-color: #fff;
      opacity: 0.75;
      position: absolute;
      left: 0;
      top: 0;
      border-radius: 12rpx;
      z-index: -99;
    }
  }
  .bannerBg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -8888;
  }
}
.littleBanner {
  width: 690rpx;
  height: 150rpx;
  margin: 0 30rpx;
  margin-top: 30rpx;
  position: relative;
  display: flex;
  align-items: center;
  .littleBannerBg {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, #ffffff, #dae4ff);
    position: absolute;
    left: 0;
    top: 0;
    z-index: -999;
    border-radius: 16rpx;
  }
  .colLine {
    width: 1rpx;
    height: 111rpx;
    background: #979797;
    opacity: 0.22;
  }
  .littleItem {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .leftItem {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      .lefticon {
        width: 131rpx;
        height: 29rpx;
        margin-bottom: 10rpx;
      }
      .righticon {
        width: 180rpx;
        height: 32rpx;
        margin-bottom: 8rpx;
      }
      .littleTips {
        height: 25rpx;
        line-height: 25rpx;
        font-size: 18rpx;
        color: #2f71df;
      }
    }
    .bigleftIcon {
      width: 138rpx;
      height: 101rpx;
    }
    .bigrightIcon {
      width: 80rpx;
      height: 85rpx;
    }
  }
}
</style>
